<template>
  <div class="task-card" shadow="hover">
    <el-row class="task-card-main" type="flex" justify="space-between">
      <el-row class="task-card-content" type="flex">
        <div class="task-card-inforn">
          <el-tooltip class="item" effect="dark" :content="card.name" :disabled="!isCardNameOverflow" placement="top-start">
            <h2 class="task-card-name" ref="parentNameWidth">
              <span ref="childNameWidth">{{card.name}}</span>
              <ConnectorTag 
                :card="card"
                ref="ConnectorTag"
              >
              </ConnectorTag>
            </h2> 
          </el-tooltip>                                   
          <el-tooltip class="item" effect="dark" :content="htmlUnEscape(card.description)" :disabled="!isOverflow" placement="top"><p class="task-card-des" ref="parentHeight"><span ref="childHeight">{{htmlUnEscape(card.description)}}</span></p></el-tooltip>
        </div>

        <div class="task-card-others">
          <div class="task-card-li">
            <p>{{$t('customer.setting.customerCardItem.label1')}}<span class="task_type">{{card.inputType=='multiple'? $t('common.base.moreTime') : $t('common.base.onceTime')}}</span></p>
            <p v-if="isShowStatisticsButton">{{$t('customer.setting.customerCardItem.label2')}}<span class="task_see" @click="onSee">{{$t('common.base.viewModule', {module:''})}}</span></p>
          </div>
        </div>
      </el-row>
      <el-switch class="visible-switch" v-model="card.enabled" :active-value="1" :inactive-value="0" @change="statusChange(card.enabled)"/>
    </el-row>

    <!-- start 操作 -->
    <el-row class="task-card-opearte" type="flex">
      <div class="task-card-opearte-more" >
        <el-dropdown placement="top" v-if="!card.config||(card.config&&!card.config.notEdit)">
          <i class="icon-diandiandian iconfont">{{$t('common.base.moreOperator')}}</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="isShowRenameButton">
              <div class="opearte_btn" @click="editRename"><i class="iconfont icon-edit-square"></i>{{$t('common.base.rename')}}</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div class="opearte_btn" @click="delTaskCard"><i class="iconfont icon-delete"></i>{{$t('common.base.delete')}}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="task-card-opearte-modify" @click="modifyTaskForm">
        <i class="icon-edit-square iconfont">{{$t('common.base.edit')}}</i>
      </div>
    </el-row>
    <!-- end 操作 -->

    <!-- 添加编辑附加组件 -->
    <edit-cuspro-name-dialog :card='card' :cardType='cardType' ref="batchCardnameDialog" @editCardSubmit='editCardSubmit'></edit-cuspro-name-dialog>

    <!-- 统计 -->
    <statistical-dialog :card="card" :cardType='cardType' ref="statisteDialog" ></statistical-dialog>
    
  </div>
</template>

<script>
import EditCardnameDialog from './EditCardnameDialog';
import statisticalDialog from '../components/statisticalDialog';
import * as SettingCusProApi from '@src/api/SettingCusProApi';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
/* service */
import { isConnectorCard } from '@service/CardService';
/* components */
import ConnectorTag from '@src/modules/setting/components/connectorTag/index.vue';

export default {
  name:'customer-card-item',
  data(){
    return{
      isCardNameOverflow:false,
      isOverflow:false
    }
  },
  props: {
    card:{
      type: Object,
      default: () => ({})
    },
    cardType:String
  },
  computed:{
    cardText(){
      return this.cardType==='customer'? this.$t('common.base.customer') : this.$t('common.base.product')
    },
    /** 
     * @description 是否显示 重命名 按钮
     * -- 1. 现在连接器也显示重命名按钮
    */
    isShowRenameButton(){
      return true
    },
    /** 
     * @description 是否显示 统计 按钮
     * -- 1. 连接器不显示
    */
    isShowStatisticsButton(){
      return !isConnectorCard(this.card)
    }
  },
  mounted(){
    this.initOverflow();
  },
  methods:{
    // 重命名
    editRename(){
      this.$refs.batchCardnameDialog.openDialog();
    },
    // 删除
    delTaskCard(){
      this.$confirm(this.$t('customer.setting.customerCardItem.tips1', {data1:this.card.name, data2:this.cardText}), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(() => {
        SettingCusProApi.cardDelete({id:this.card.id,cardType:this.cardType}).then(res=>{
          const { code, message } = res;
          if(code === 0){
            this.$message.success(this.$t('common.base.tip.deleteSuccess'));
            this.$emit('statusChange');
          }else{
            this.$message.error(message);
          }
        }).catch(err=>{
          console.error(err);
        })
      }).catch(()=>{});
    },
    // 编辑
    modifyTaskForm(){
      
      // 连接器
      if (isConnectorCard(this.card)) {
        this.$emit('edit', this.card)
        return
      }
      
      setTimeout(()=>{
        // this.$platform.openTab({
        //   id: 'customer_card_setting',
        //   title: '附加组件表单设置',
        //   url: `/setting/customer/cardFormfields?id=${this.card.id}&name=${encodeURIComponent(this.card.name)}&cardType=${this.cardType}`,
        //   reload: true,
        // });
        openAccurateTab({
          type: PageRoutesTypeEnum.PageCustomerAdditionalFormSet,
          params: `id=${this.card.id}&name=${encodeURIComponent(this.card.name)}&cardType=${this.cardType}`,
          reload: true,
        })
      }, 1000)
    },
    async statusChange(enabled){
      const params={
        cardType:this.cardType,
        id:this.card.id,
        enabled
      }
      let {code,message} = await SettingCusProApi.cardEnabled(params);
      if(code===0){
        this.$emit('statusChange');
      }else{
        this.$message.error(message);
      }
    },
    // 重命名成功
    editCardSubmit(){
      location.reload();
    },
    // 查看
    onSee(){
      this.$refs.statisteDialog.openDialog();
    },
    // 初始化溢出tips
    initOverflow() {
      this.$nextTick(()=> {
        const connectorTagWidth = this.$refs?.ConnectorTag?.$el?.offsetWidth || 0
        const paddingRight = 40
        this.isCardNameOverflow = this.$refs?.parentNameWidth?.offsetWidth <= this.$refs?.childNameWidth?.offsetWidth + connectorTagWidth + paddingRight
        console.log('hbc ~ this.$nextTick ~ this.isCardNameOverflow:', this.isCardNameOverflow)
        this.isOverflow = this.$refs?.parentHeight?.offsetWidth < this.$refs?.childHeight?.offsetWidth
      })
    },
    htmlUnEscape(value){
      if(!value) return '';
      return value.replace( /&lt;/g, '<').replace(/&gt;/g, '>');
    }
  },
  components:{
    [EditCardnameDialog.name]:EditCardnameDialog,
    [statisticalDialog.name]:statisticalDialog,
    ConnectorTag
  }
}
</script>

<style lang="scss" scoped>
.task-card{
  width: 358px;
  height: 178px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04); 
  &:hover{
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
  }

  .task-card-main{
    position: relative;
    display: flex;
    height: calc(100% - 32px);
    padding: 16px 20px;

    .visible-switch {
      position: absolute;
      right: 16px;
      top: 16px;
    }

    .task-card-content{
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      width: 100%;

      .task-card-inforn{
        .task-card-name{  
          display: flex;
          align-content: center;
          margin-bottom: 0;
          @include text-ellipsis;
          padding-right: 40px;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          span {
            max-width: 180px;
            @include text-ellipsis;
          }
        }
        .task-card-des{
          height: 17px;
          font-size: 12px; 
          color: #666666;
          line-height: 17px;
          @include text-ellipsis; 
          margin-block-end: 0em;
          margin-bottom: 8px;
          margin-top: 8px;
          width: 248px;
        }
      }
      .task-card-others{
        margin-top: 12px;
        p{
          margin-bottom: 4px;
          font-size: 12px;
          color: #666666;
          span{
            color: $color-primary;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
        .task-card-li{
          display: flex;
          justify-content: flex-start;
          height: 20px;
          p{
            min-width: 86px;
            .task_type{
              color: #333333;
            }
            .task_see{
              color: $color-primary;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .task-card-opearte{
        height: 32px;
        border-top: 1px solid#F5F5F5;
        & > div {
            cursor: pointer;
            flex: 1;
            text-align: center;
            line-height: 32px;            
            i{
                font-size: 12px;
                color: #999999;  
                &:hover{
                    color: $color-primary; 
                }
                &::before{
                    margin-right: 8px;
                }
            }
           
        }
        .task-card-opearte-more{
           border-right: 1px solid#F5F5F5;
           font-size: 14px;  
           &:hover{
               .el-dropdown{
                   color: $color-primary; 
               }
            }

        }
    }
}

// @media screen and (max-width: 1920px) {
//   .task-card {
//     width: calc(25% - 12px);
//   }
//   .task-card-name{
//     width: 240px;
//   }
// }
// @media screen and (max-width: 1680px) {
//   .task-card {
//     width: calc(33.3% - 12px);
//   }
//   .task-card-name{
//     width: 300px;
//   }
// }
// @media screen and (max-width: 1440px) {
//   .task-card {
//     width: 328px;
//   }
//   .task-card-name{
//     width: 240px;
//   }
// }
</style>